<!--素材选择器-->
<template>
    <el-dialog
        class="mater-select-dialog"
        title="选择素材"
        :visible.sync="visible"
        :append-to-body="false"
        :modal="false"
        :close-on-click-modal="false"
    >
        <el-tabs
            v-model="viewMaterType"
            @change="handlerTabChange"
            v-if="materType === 'all'"
        >
            <el-tab-pane label="图片" name="image"/>
            <el-tab-pane label="音频" name="voice"/>
            <el-tab-pane label="视频" name="video"/>
            <el-tab-pane label="图文" name="news"/>
        </el-tabs>
        <!--        选择图文素材-->
        <div class="flex justify-start"
             v-if="viewMaterType === 'news'"
        >
            <div
                class="margin-xs"
                :class="selectMater.mediaId === item.mediaId ? 'isAction' : ''"
                v-for="item in news.items"
                :style="{width:100/rows + '%'}"
                style="border:1px solid #efefef;border-radius: 5px;"
                @click="handlerItemClick(item)"
            >
                <div class="card-preview"
                     v-for="(article,k) in item.content.articles"
                >
                    <div v-if="k === 0" style="position: relative;">
                        <el-image
                            class="article-thumb"
                            fit="contain"
                            :src="article.thumbUrl"
                            style="height: 124px"
                        />
                        <label class="padding-xs"
                               style="
                                   display:block;
                                   position: absolute;
                                   bottom: 0;
                                   width: 100%;
                                   background-image: linear-gradient(rgba(245,245,245,.2),rgba(185,185,185,.6));
                                   color: #fff;"
                        >{{ article.title }}</label>
                    </div>
                    <div class="flex padding-xs" v-else style="border-bottom: 1px solid #efefef">
                        <label class="flex-sub" style="vertical-align: center;">{{ article.title }}</label>
                        <el-image
                            class="article-thumb"
                            v-if="article.thumbUrl"
                            :src="article.thumbUrl"
                            style="width: 40px"/>
                    </div>
                </div>
            </div>
        </div>
        <!--        选择图片素材-->
        <el-image
            v-else-if="viewMaterType === 'image'"
            class="margin-xs"
            :class="selectMater.mediaId === item.mediaId ? 'isAction' : ''"
            lazy
            v-for="item in image.items"
            :src="item.url"
            fit="none"
            @click="handlerItemClick(item)"
            style="border:1px solid #efefef;width: 120px;height:120px;"
        />
        <!--        选择音频素材-->
        <div
            v-else-if="viewMaterType === 'voice'"
            v-for="item in voice.items"
            :class="selectMater.mediaId === item.mediaId ? 'isAction' : ''"
            @click="handlerItemClick(item.mediaId)"
        >
            <i class="el-icon-bell"/>
            <div class="card-preview-text">管理后台不支持预览</div>
        </div>
        <!--        选择视频素材-->
        <div
            v-else-if="viewMaterType === 'video'"
            v-for="item in video.items"
            :class="selectMater.mediaId === item.mediaId ? 'isAction' : ''"
            @click="handlerItemClick(item.mediaId)"
        >
            <i class="el-icon-video-camera"/>
        </div>
        <!--        页脚按钮部分-->
        <template slot="footer">
            <el-button size="small" @click="visible = false">取消</el-button>
            <el-button size="small" type="primary" @click="handlerConfirmClick">确认</el-button>
        </template>
    </el-dialog>
</template>

<script>
import {mapActions, mapState, mapMutations} from 'vuex'

export default {
    name: "materSelectDialog",
    props: {
        materType: {
            type: String,
            default: 'image'
        },
        rows: {
            type: Number,
            default: 4
        },
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            paging: {
                pageSize: 20,
                pageIndex: 1,
                // pageCount: this.news.count
            },
            selectMater:{}, // 当前选中的素材项
            viewMaterType:this.materType === 'all' ? 'image' : this.materType
        }
    },
    computed: {
        ...mapState({
            image: state => state.mater.materData.image,
            voice: state => state.mater.materData.voice,
            video: state => state.mater.materData.video,
            news: state => state.mater.materData.news
        })
    },
    watch: {
        visible(newVal, oldVal) {
            this.$emit('update:visible', newVal)
        },
        materType(newVal,oldVal){
            this.viewMaterType = newVal
        }
    },
    methods: {
        ...mapActions({
            getMaterImage: 'getMaterDataImage',
            getMaterVoice: 'getMaterDataVoice',
            getMaterVideo: 'getMaterDataVideo',
            getMaterNews: 'getMaterDataNews'
        }),
        ...mapMutations({
            getInitMater: 'getInitMater'
        }),
        handlerTabChange(tabName){
            this.viewMaterType = tabName
        },
        handlerItemClick(materItem) {
            this.selectMater = materItem
        },
        handlerConfirmClick(){
            this.selectMater.selectType = this.viewMaterType
            this.$emit('selected',this.selectMater)
            this.$emit("update:visible",false)
            this.visible = false
        }
    },
    created() {
        // 从window.storage中获取素材列表数据
        this.getInitMater()
        // 图片数据行数为-1，没有从服务器获取过数据，调用方法进行获取
        if (this.image.count < 0) {
            this.getMaterImage(1)
        }
        if (this.voice.count < 0) {
            this.getMaterVoice(1)
        }
        if (this.video.count < 0) {
            this.getMaterVideo(1)
        }
        if (this.news.count < 0) {
            this.getMaterNews(1)
        }
    }
}
</script>

<style scoped lang="less">
.mater-select-dialog {
    .isAction {
        border-color: #2bd2ff !important;
    }
}
</style>